<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="./index.css"></link>

</head>

<body>
    <div class="center">
        <input id="img" type="file" placeholder="image" />
        <input id="merge" type="button" value="Merge" onclick="imgMerge()" />
        <label>Quality</label>
        <label id="quality-label">(10)</label>
        <input id="quality" type="range" min="1" max="30" step="1" value="10" title="10" onchange="document.getElementById('quality-label').innerText = '(' + document.getElementById('quality').value + ')'" placeholder="quality" />
        <label>Delay</label>
        <label id="delay-label">(500)</label>
        <input id="delay" type="range" min="0" max="1000" step="1" value="500" title="500" onchange="document.getElementById('delay-label').innerText = '(' + document.getElementById('delay').value + ')'" placeholder="delay" />
    </div>
    <div class="center margin-top-5">
        <div id="img-show" class="img-show">

        </div>
        <div id="img-show-hidden">

        </div>
        <div class="img-show img-merge-show">
            <img id="img-merge" alt="" />
        </div>
    </div>

    <div id="img-separate" class="center">

    </div>
    <div id="editor-view">
        <canvas id="editor-view-canvas"></canvas>
        <div>
            <button onclick="editOk">OK</button>
        </div>

    </div>
    <script src="./common.js"></script>
    <script src="./libgif.js"></script>
    <script src="./gif.js"></script>
    <script src="./imgParser.js"></script>
    <script src="./fabric.js"></script>
    <script>
        var imgFileEle = document.getElementById('img');
        var imgShowEle = document.getElementById('img-show');
        var imgShowHiddenEle = document.getElementById('img-show-hidden');
        var imgMergeEle = document.getElementById('img-merge');
        var imgSeparateEle = document.getElementById('img-separate');

        var qualityEle = document.getElementById('quality');
        var delayEle = document.getElementById('delay');

        imgFileEle.addEventListener("change", function(e) {

            var files = e.target.files;
            if (files.length > 0) {
                if (imgShowHiddenEle.children.length > 0) {
                    var flag = confirm('All data will be lost, Sure?');
                    if (flag) {
                        parseImg(files);
                    } else {
                        imgFileEle.value = null;
                    }
                } else {
                    parseImg(files);
                }
            }
        })

        function editOk() {

        }

        var gifParser = new GifParser();
        var picParser = new PicParser();

        function parseImg(files) {
            imgShowHiddenEle.innerHTML = null;
            imgSeparateEle.innerHTML = null;
            imgMergeEle.src = '';
            var fName = files[0].name;
            if (fName.endsWith('.gif')) {
                gifParser.parse();
            } else if (/\.(?:jpg|jpeg|png|bmp)$/i.test(fName)) {
                picParser.parse();
            }

        }

        function mergeImg(imgs) {

            var gif = new GIF({
                workers: 5,
                quality: qualityEle.value,
                workerScript: './gif.worker.js',
                width: imgShowHiddenEle.getAttribute('img-width'),
                height: imgShowHiddenEle.getAttribute('img-height'),
                //background: '#fff',
                //transparent: '#000',
            });

            for (var i = 0; i < imgs.length; i++) {
                gif.addFrame(imgs[i], {
                    delay: delayEle.value,
                    //copy: true,
                });
            }

            //gif.addFrame(canvasElement, {delay: 200});
            //gif.addFrame(ctx, {copy: true});

            gif.on('finished', function(blob) {
                console.log('finished');
                imgMergeEle.src = URL.createObjectURL(blob);
            });

            gif.render();
        }

        function imgMerge(e) {
            var imgEles = imgSeparateEle.children;
            if (imgEles && imgEles.length) {
                var imgs = [];
                for (var i = 0; i < imgEles.length; i++) {
                    if (imgEles[i].className.indexOf("img-delete") == -1) {
                        imgs.push(imgEles[i].getElementsByTagName("img")[0]);
                    }
                }
                if (imgs.length) {
                    mergeImg(imgs);
                } else {
                    alert('There is no image');
                }
            }
        }
    </script>

</body>

</html>